<template>
  <div class="project-add">
    <div class="page-header">
      <h1>新增项目</h1>
      <p>创建新的众筹项目</p>
    </div>
    
    <el-card class="form-card" shadow="hover">
      <el-form
        ref="projectFormRef"
        :model="projectForm"
        :rules="projectRules"
        label-width="120px"
        class="project-form"
      >
        <el-row :gutter="24">
          <el-col :xs="24" :md="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="projectForm.name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item label="项目分类" prop="category">
              <el-select v-model="projectForm.category" placeholder="请选择分类">
                <el-option label="科技" value="tech" />
                <el-option label="设计" value="design" />
                <el-option label="美食" value="food" />
                <el-option label="艺术" value="art" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="项目描述" prop="description">
          <el-input
            v-model="projectForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入项目描述"
          />
        </el-form-item>
        
        <el-row :gutter="24">
          <el-col :xs="24" :md="12">
            <el-form-item label="目标金额" prop="targetAmount">
              <el-input-number
                v-model="projectForm.targetAmount"
                :min="1000"
                :max="1000000"
                :step="1000"
                style="width: 100%"
                placeholder="请输入目标金额"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12">
            <el-form-item label="众筹天数" prop="duration">
              <el-input-number
                v-model="projectForm.duration"
                :min="7"
                :max="365"
                :step="1"
                style="width: 100%"
                placeholder="请输入众筹天数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="项目图片" prop="image">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleImageChange"
            :limit="1"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 2MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="项目详情" prop="details">
          <el-input
            v-model="projectForm.details"
            type="textarea"
            :rows="6"
            placeholder="请输入项目详细信息"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">
            创建项目
          </el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const router = useRouter()
const projectFormRef = ref()
const loading = ref(false)

const projectForm = reactive({
  name: '',
  category: '',
  description: '',
  targetAmount: 10000,
  duration: 30,
  image: '',
  details: ''
})

const projectRules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '项目名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择项目分类', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入项目描述', trigger: 'blur' },
    { min: 10, max: 200, message: '项目描述长度在 10 到 200 个字符', trigger: 'blur' }
  ],
  targetAmount: [
    { required: true, message: '请输入目标金额', trigger: 'blur' },
    { type: 'number', min: 1000, message: '目标金额不能少于1000元', trigger: 'blur' }
  ],
  duration: [
    { required: true, message: '请输入众筹天数', trigger: 'blur' },
    { type: 'number', min: 7, max: 365, message: '众筹天数在7到365天之间', trigger: 'blur' }
  ],
  details: [
    { required: true, message: '请输入项目详情', trigger: 'blur' }
  ]
}

const handleImageChange = (file) => {
  projectForm.image = file.name
}

const submitForm = async () => {
  if (!projectFormRef.value) return
  
  try {
    await projectFormRef.value.validate()
    loading.value = true
    
    // 模拟API调用
    setTimeout(() => {
      ElMessage.success('项目创建成功！')
      router.push('/admin/business/project/list')
      loading.value = false
    }, 1500)
  } catch (error) {
    loading.value = false
  }
}

const resetForm = () => {
  if (projectFormRef.value) {
    projectFormRef.value.resetFields()
  }
}
</script>

<style scoped>
.project-add {
  max-width: 800px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  font-size: 14px;
}

.form-card {
  border-radius: 12px;
}

.project-form {
  padding: 20px 0;
}

:deep(.el-card__body) {
  padding: 24px;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 180px;
}

@media (max-width: 768px) {
  .project-add {
    padding: 0 16px;
  }
  
  :deep(.el-form-item__label) {
    text-align: left;
  }
}
</style> 